<template>
    <view class="record-item">
		<view class="top">
			<view class="left">
				<text class="remark">{{ item.remark }}</text>
				<text class="trade-no" v-if="item.tradeNo">{{ current === 0 ? '订单' : '交易' }}号：{{ item.tradeNo }}</text>
				<text class="create-time">{{ item.createTime }}</text>
			</view>
			<view class="right">
				<text class="consume" :class="[{ active : current === 0}]">{{ current === 0 ? item.consume : item.amount | Fixed(2) }}元</text>
				<view class="status active" v-if="current === 1">{{ item.status | statusFilter }}</view>
			</view>
		</view>
		<view class="reason" v-if="item.reason">{{ item.reason }}</view>
    </view>
</template>

<script>
    export default {
        name: "RecordItem",
        props: {
            item: {
                type: Object,
                default: () => {
                    return {}
                }
            },
            current: {
                type: Number,
                default: () => {
                    return 0
                }
            }
        },
		filters: {
			statusFilter(val) {
				switch(val) {
					case 0:
						return '审核中';
					case 1:
						return '待打款'
					case 2:
						return '审核失败'
					case 3:
						return '提现成功'
					case 4:
						return '提现失败'
				}
			}
		}
    }
</script>

<style lang="scss" scoped>
.record-item {
	padding: 20rpx 0;
	border-bottom: 2rpx solid #E8E8E8;
	.top {
		padding: 0 40rpx;
		@include flexBox(space-between, flex-start);
		.left {
			font-size: 24rpx;
			flex: 1;
			overflow-x: auto;
			overflow-y: hidden;
			@include flexBox(null, null, column);
			.remark {
				font-size: 28rpx;
				color: #2B2C2E;
				font-weight: 600;
				margin-bottom: 10rpx;
			}
			.trade-no {
				color: #717076;
				margin: 10rpx 0;
			}
			.create-time {
				color: #717076;
			}
		}
		.right {
			@include flexBox(space-between, flex-end, column);
			.consume, .status {
				color: #333333;
				&.active {
					color: $main-color-text;
				}
			}
		}
	}
	.reason {
		background: #FFF0F2;
		padding: 14rpx 30rpx;
		margin-top: 20rpx;
		color: $main-color-text;
		font-size: 24rpx;
	}
}
</style>